<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="24">
          <el-form-item label-width="138px" label="一般体征 筛查员:" prop="screener_general_sign">
            <el-input v-model="formData.screener_general_sign" placeholder="请输入一般体征 筛查员" show-word-limit
              clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="92px" label="检查时间:" prop="general_check_time">
            <el-date-picker v-model="formData.general_check_time" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" :style="{width: '100%'}" placeholder="请选择检查时间" clearable>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="64px" label="身高:" prop="height">
            <el-input v-model="formData.height" placeholder="请输入身高" clearable :style="{width: '100%'}">
              <template slot="append">cm</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="54px" label="体重:" prop="weight">
            <el-input v-model="formData.weight" placeholder="请输入体重" clearable :style="{width: '100%'}">
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="54px" label="BMI:" prop="bmi">
            <el-input v-model="formData.bmi" placeholder="请输入BMI" clearable :style="{width: '100%'}">
              <template slot="append">kg/m²</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="64px" label="腰围:" prop="waistline">
            <el-input v-model="formData.waistline" placeholder="请输入腰围" clearable :style="{width: '100%'}">
              <template slot="append">cm</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="54px" label="臀围:" prop="hip_circum">
            <el-input v-model="formData.hip_circum" placeholder="请输入臀围" clearable :style="{width: '100%'}">
              <template slot="append">cm</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="268px" label="现测血压（同侧，需测量2次）筛查员:" prop="screener_blood_pressure">
            <el-input v-model="formData.screener_blood_pressure" placeholder="请输入现测血压（同侧，需测量2次）筛查员" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="92px" label="测量时间:" prop="blood_check_time">
            <el-date-picker v-model="formData.blood_check_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择测量时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="148px" label="第一次收缩压SBP:" prop="sys_blood_pre_1st">
            <el-input v-model="formData.sys_blood_pre_1st" placeholder="请输入第一次收缩压SBP" clearable
              :style="{width: '100%'}">
              <template slot="append">mmHg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="93px" label="舒张压DBP:" prop="dias_blood_pre_1st">
            <el-input v-model="formData.dias_blood_pre_1st" placeholder="请输入舒张压DBP" clearable
              :style="{width: '100%'}">
              <template slot="append">mmHg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="44px" label="脉搏:" prop="pulse_1st">
            <el-input v-model="formData.pulse_1st" placeholder="请输入脉搏" clearable :style="{width: '100%'}">
              <template slot="append">次/分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="148px" label="第二次收缩压SBP:" prop="sys_blood_pre_2nd">
            <el-input v-model="formData.sys_blood_pre_2nd" placeholder="请输入第二次收缩压SBP" clearable
              :style="{width: '100%'}">
              <template slot="append">mmHg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="93px" label="舒张压DBP:" prop="dias_blood_pre_2nd">
            <el-input v-model="formData.dias_blood_pre_2nd" placeholder="请输入舒张压DBP" clearable
              :style="{width: '100%'}">
              <template slot="append">mmHg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="44px" label="脉搏:" prop="pulse_2nd">
            <el-input v-model="formData.pulse_2nd" placeholder="请输入脉搏" clearable :style="{width: '100%'}">
              <template slot="append">次/分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="138px" label="心脏听诊 筛查员:" prop="screener_cardiac_auscu">
            <el-input v-model="formData.screener_cardiac_auscu" placeholder="请输入心脏听诊 筛查员" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="92px" label="检查时间:" prop="cardiac_check_time">
            <el-date-picker v-model="formData.cardiac_check_time" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" :style="{width: '100%'}" placeholder="请选择检查时间" clearable>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="92px" label="心脏杂音:" prop="heart_murmur">
            <el-radio-group v-model="formData.heart_murmur" size="medium">
              <el-radio v-for="(item, index) in heart_murmurOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="54px" label="心率:" prop="heart_rate">
            <el-radio-group v-model="formData.heart_rate" size="medium">
              <el-radio v-for="(item, index) in heart_rateOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        screener_general_sign: "",
        general_check_time: null,
        height: undefined,
        weight: undefined,
        bmi: undefined,
        waistline: undefined,
        hip_circum: undefined,
        screener_blood_pressure: undefined,
        blood_check_time: null,
        sys_blood_pre_1st: "",
        dias_blood_pre_1st: undefined,
        pulse_1st: undefined,
        sys_blood_pre_2nd: undefined,
        dias_blood_pre_2nd: undefined,
        pulse_2nd: undefined,
        screener_cardiac_auscu: undefined,
        cardiac_check_time: null,
        heart_murmur: undefined,
        heart_rate: undefined,
      },
      rules: {
        screener_general_sign: [],
        general_check_time: [],
        height: [],
        weight: [],
        bmi: [],
        waistline: [],
        hip_circum: [],
        screener_blood_pressure: [],
        blood_check_time: [],
        sys_blood_pre_1st: [],
        dias_blood_pre_1st: [],
        pulse_1st: [],
        sys_blood_pre_2nd: [],
        dias_blood_pre_2nd: [],
        pulse_2nd: [],
        screener_cardiac_auscu: [],
        cardiac_check_time: [],
        heart_murmur: [],
        heart_rate: [],
      },
      heart_murmurOptions: [{
        "label": "无",
        "value": 1
      }, {
        "label": "有",
        "value": 2
      }],
      heart_rateOptions: [{
        "label": "整齐",
        "value": 1
      }, {
        "label": "不齐",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
